import { 
  Search, Brain, ShieldQuestion, ArrowRight, CheckCircle, FileSearch, 
  User, XCircle, Heart, Star, Coffee, AlertCircle, Monitor, ShoppingBag, 
  MessageCircle, Clock, Battery, Users, Smartphone, Box, Activity, Frown,
  Briefcase, Ghost, Home, Trash2, Camera, Music, Dumbbell, BookOpen,
  DollarSign, MapPin, Smile, Zap
} from 'lucide-react';

// --- DATABASE 32 KASUS ---
const casesData = [
  { id: 1, client: 'Budi (40)', title: 'Kasus #01: Direktur yang Lupa Waktu', problem: 'Budi merasa hidupnya seperti robot yang cuma bekerja.', deduction: 'Budi butuh istirahat dan kumpul bareng keluarganya.', resolution: 'Ia mengambil cuti untuk pertama kalinya dalam 5 tahun.' },
  { id: 2, client: 'Dina (24)', title: 'Kasus #02: Artis TikTok yang Kesepian', problem: 'Merasa hampa meski punya jutaan pengikut.', deduction: 'Dina butuh mencintai dirinya apa adanya, tanpa filter kamera.', resolution: 'Ia mulai menggambar lagi sebagai hobi tanpa mempostingnya.' },
  { id: 3, client: 'Tono (15)', title: 'Kasus #03: Gamer yang Tidak Punya Teman', problem: 'Main game 15 jam sehari karena tidak punya teman nyata.', deduction: 'Tono butuh teman asli dan merasa diakui di dunia nyata.', resolution: 'Ia ikut eskul robotik untuk cari teman sehobi.' },
  { id: 4, client: 'Siti (30)', title: 'Kasus #04: Si Gila Belanja', problem: 'Dikejar hutang pinjol karena hobi belanja barang branded.', deduction: 'Siti butuh merasa berharga dari dalam diri, bukan dari barang.', resolution: 'Ia mulai menabung dan menghapus aplikasi belanja.' },
  { id: 5, client: 'Pak Rahmat (55)', title: 'Kasus #05: Ayah yang Super Galak', problem: 'Keluarga menjauh karena sifatnya yang otoriter.', deduction: 'Pak Rahmat butuh kelembutan agar benar-benar dihormati.', resolution: 'Ia belajar mendengarkan tanpa langsung membentak.' },
  { id: 6, client: 'Ayu (20)', title: 'Kasus #06: Korban Ikut-ikutan (FOMO)', problem: 'Rela sakit lambung demi ikut konser gaya-gayaan.', deduction: 'Ayu butuh teman baru yang menerimanya apa adanya.', resolution: 'Ia mulai fokus pada kesehatannya sendiri.' },
  { id: 7, client: 'Rio (28)', title: 'Kasus #07: Gila Kerja Sampai Sakit', problem: 'Merasa tidak berguna jika tidak lembur tiap hari.', deduction: 'Rio butuh sadar bahwa tubuhnya punya batas.', resolution: 'Ia mulai berolahraga dan pulang tepat waktu.' },
  { id: 8, client: 'Bu Ningsih (45)', title: 'Kasus #08: Ratu Pamer Arisan', problem: 'Pamer perhiasan tapi rumah tangganya berantakan.', deduction: 'Bu Ningsih butuh rasa berharga tanpa harus merendahkan orang.', resolution: 'Ia berhenti bergosip dan fokus mengurus rumah.' },
  { id: 9, client: 'Dimas (22)', title: 'Kasus #09: Bertahan Demi Tidak Jomblo', problem: 'Punya pacar kasar tapi takut putus karena kesepian.', deduction: 'Dimas butuh belajar mencintai dirinya sendiri.', resolution: 'Ia akhirnya berani mengakhiri hubungan toxic.' },
  { id: 10, client: 'Rina (35)', title: 'Kasus #10: Ibu yang Terlalu Mengekang', problem: 'Anaknya stres karena dipaksa les tiap jam.', deduction: 'Rina butuh tenang dan anaknya butuh waktu main.', resolution: 'Ia mengurangi jadwal les anaknya agar bisa bermain.' },
  { id: 11, client: 'Doni (18)', title: 'Kasus #11: Benci Cermin', problem: 'Minum obat diet ilegal demi mirip idol.', deduction: 'Doni butuh menerima bentuk tubuhnya yang sehat.', resolution: 'Ia mulai makan sehat tanpa obsesi kurus.' },
  { id: 12, client: 'Maya (27)', title: 'Kasus #12: Si Nggak Enakan', problem: 'Kelelahan karena mengerjakan tugas semua teman kantor.', deduction: 'Maya butuh keberanian berkata TIDAK demi kebaikannya.', resolution: 'Ia mulai berani menolak permintaan yang berlebihan.' },
  { id: 13, client: 'Anton (40)', title: 'Kasus #13: Budak HP Terbaru', problem: 'Selalu cicil HP baru padahal cuma pakai WA.', deduction: 'Anton butuh bersyukur dengan apa yang ada.', resolution: 'Ia melunasi hutang dan berhenti mengejar gengsi gadget.' },
  { id: 14, client: 'Laila (25)', title: 'Kasus #14: Standar Kurus Palsu', problem: 'Sering pingsan karena diet demi menyenangkan pacar.', deduction: 'Laila butuh kesehatan, bukan validasi pacar toxic.', resolution: 'Ia putus dengan pacarnya dan kembali makan normal.' },
  { id: 15, client: 'Kakek Jojo (65)', title: 'Kasus #15: Penimbun Sampah', problem: 'Rumah penuh sampah karena dianggap kenangan.', deduction: 'Kakek Jojo butuh keluarga, bukan tumpukan barang.', resolution: 'Ia membersihkan rumah agar cucunya betah berkunjung.' },
  { id: 16, client: 'Eko (33)', title: 'Kasus #16: Gila Hormat di Kantor', problem: 'Marah kalau panggilannya tidak pakai gelar.', deduction: 'Eko butuh karakter yang baik, bukan sekadar gelar.', resolution: 'Ia mulai rendah hati dan membantu staf junior.' },
  { id: 17, client: 'Rara (19)', title: 'Kasus #17: Kecanduan Filter Wajah', problem: 'Malu keluar rumah kalau tidak dandan seperti filter.', deduction: 'Rara butuh percaya diri dengan wajah aslinya.', resolution: 'Ia mulai berani keluar rumah tanpa makeup tebal.' },
  { id: 18, client: 'Pak Hendra (50)', title: 'Kasus #18: Pensiunan yang Hilang Arah', problem: 'Merasa tidak berguna setelah tidak bekerja.', deduction: 'Pak Hendra butuh hobi baru dan tujuan hidup baru.', resolution: 'Ia mulai berkebun dan aktif di komunitas lingkungan.' },
  { id: 19, client: 'Tessa (21)', title: 'Kasus #19: Mahasiswa Abadi', problem: 'Takut lulus karena takut menghadapi dunia kerja.', deduction: 'Tessa butuh keberanian menghadapi masa depan.', resolution: 'Ia mulai magang dan menyelesaikan skripsinya.' },
  { id: 20, client: 'Gani (29)', title: 'Kasus #20: Judi Online', problem: 'Gaji habis untuk slot karena ingin kaya instan.', deduction: 'Gani butuh kerja keras, bukan keberuntungan palsu.', resolution: 'Ia berhenti judi dan mulai mengelola keuangan.' },
  { id: 21, client: 'Lina (38)', title: 'Kasus #21: Perbandingan Sosial', problem: 'Sedih setiap melihat story teman yang liburan.', deduction: 'Lina butuh fokus pada kebahagiaan sendiri.', resolution: 'Ia melakukan detox media sosial selama sebulan.' },
  { id: 22, client: 'Rudi (26)', title: 'Kasus #22: Si Paling Debat', problem: 'Selalu ingin menang debat di medsos sampai stres.', deduction: 'Rudi butuh kedamaian pikiran, bukan kemenangan debat.', resolution: 'Ia mulai mengabaikan komentar negatif di internet.' },
  { id: 23, client: 'Wati (42)', title: 'Kasus #23: Terlalu Memanjakan Anak', problem: 'Anaknya jadi manja dan suka memukul orang.', deduction: 'Wati butuh tegas demi masa depan anaknya.', resolution: 'Ia mulai menetapkan aturan di rumah.' },
  { id: 24, client: 'Hendra (24)', title: 'Kasus #24: Takut Komitmen', problem: 'Sering ghosting pacar saat hubungan mulai serius.', deduction: 'Hendra butuh berdamai dengan trauma masa lalu.', resolution: 'Ia mulai bicara jujur tentang perasaannya.' },
  { id: 25, client: 'Bu Mirna (48)', title: 'Kasus #25: Obsesi Kebersihan', problem: 'Marah jika ada debu sedikit pun, keluarga tidak nyaman.', deduction: 'Bu Mirna butuh rileks, rumah adalah tempat tinggal, bukan museum.', resolution: 'Ia mulai santai jika rumah sedikit berantakan.' },
  { id: 26, client: 'Zaki (20)', title: 'Kasus #26: Ingin Cepat Viral', problem: 'Melakukan prank berbahaya demi konten.', deduction: 'Zaki butuh empati pada orang lain.', resolution: 'Ia mulai membuat konten yang bermanfaat.' },
  { id: 27, client: 'Sandra (31)', title: 'Kasus #27: Trauma Masa Kecil', problem: 'Selalu curiga pada semua orang yang baik padanya.', deduction: 'Sandra butuh bantuan untuk sembuh dari trauma.', resolution: 'Ia mulai belajar mempercayai orang secara perlahan.' },
  { id: 28, client: 'Bimo (35)', title: 'Kasus #28: Ego Lelaki', problem: 'Malu mengakui kalau dia sedih atau butuh bantuan.', deduction: 'Bimo butuh sadar kalau pria boleh menangis dan butuh bantuan.', resolution: 'Ia mulai terbuka pada istrinya tentang masalahnya.' },
  { id: 29, client: 'Nadia (23)', title: 'Kasus #29: Terlalu Banyak Pilihan', problem: 'Stres memilih karier sampai tidak melakukan apa-apa.', deduction: 'Nadia butuh mulai dari satu langkah kecil.', resolution: 'Ia memilih satu pekerjaan dan mulai menjalaninya.' },
  { id: 30, client: 'Pram (40)', title: 'Kasus #30: Terjebak Masa Lalu', problem: 'Terus membahas kejayaan masa SMA-nya yang sudah lewat.', deduction: 'Pram butuh hidup di masa sekarang.', resolution: 'Ia mulai merencanakan masa depan yang baru.' },
  { id: 31, client: 'Siska (26)', title: 'Kasus #31: Kecanduan Kopi & Kafein', problem: 'Gemetar dan sakit kepala kalau tidak minum 6 gelas kopi.', deduction: 'Siska butuh energi alami dari tidur, bukan kafein.', resolution: 'Ia mengurangi kopi dan memperbaiki pola tidur.' },
  { id: 32, client: 'Yanto (50)', title: 'Kasus #32: Takut Tua', problem: 'Pakai baju remaja dan dandan berlebihan agar terlihat muda.', deduction: 'Yanto butuh menerima proses penuaan dengan anggun.', resolution: 'Ia mulai berpakaian sesuai usia dan merasa nyaman.' }
];

// Helper untuk icon acak atau spesifik jika mau di-mapping manual
const getIconForCase = (id) => {
  const icons = [<Smartphone/>, <Monitor/>, <ShoppingBag/>, <Heart/>, <Users/>, <Battery/>, <Activity/>, <Coffee/>, <Zap/>, <Home/>];
  return icons[id % icons.length];
};

export default function App() {
  const [gameState, setGameState] = useState('intro');
  const [activeCase, setActiveCase] = useState(null);
  const [collectedCount, setCollectedCount] = useState(0);
  const [showFeedback, setShowFeedback] = useState(false);
  const [isCorrect, setIsCorrect] = useState(false);

  const startCase = (c) => {
    setActiveCase(c);
    setCollectedCount(0);
    setShowFeedback(false);
    setGameState('investigate');
  };

  const finishInvestigate = () => setGameState('deduction');

  const handleDeduction = (correct) => {
    setIsCorrect(correct);
    setShowFeedback(true);
    if (correct) {
      setTimeout(() => setGameState('resolution'), 2000);
    }
  };

  return (
    <div className="min-h-screen bg-neutral-950 text-neutral-100 font-sans p-4 md:p-8">
      {/* HEADER */}
      {gameState !== 'intro' && (
        <header className="max-w-5xl mx-auto flex justify-between items-center mb-8 border-b border-neutral-800 pb-4">
          <div className="flex items-center gap-2 text-indigo-400 font-bold text-xl cursor-pointer" onClick={() => setGameState('caselist')}>
            <Brain size={28} /> <span>Detektif Batin</span>
          </div>
          <button onClick={() => setGameState('caselist')} className="text-xs bg-neutral-800 px-3 py-1 rounded-md text-neutral-400 hover:bg-neutral-700">Kembali ke Daftar</button>
        </header>
      )}

      {/* INTRO */}
      {gameState === 'intro' && (
        <div className="max-w-xl mx-auto mt-20 text-center animate-in fade-in slide-in-from-bottom-4 duration-700">
          <div className="bg-indigo-600/20 p-4 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
            <ShieldQuestion className="text-indigo-500" size={40} />
          </div>
          <h1 className="text-4xl font-black mb-4 tracking-tighter uppercase">Detektif Batin</h1>
          <p className="text-neutral-400 mb-8 leading-relaxed">Jadilah analis yang membantu 32 orang menemukan kembali jati diri mereka. Temukan petunjuk di antara tumpukan keinginan palsu mereka.</p>
          <button onClick={() => setGameState('caselist')} className="bg-indigo-600 hover:bg-indigo-500 text-white px-10 py-4 rounded-full font-bold transition-all shadow-lg shadow-indigo-600/20">MULAI INVESTIGASI</button>
        </div>
      )}

      {/* CASE LIST */}
      {gameState === 'caselist' && (
        <div className="max-w-6xl mx-auto animate-in fade-in duration-500">
          <h2 className="text-2xl font-bold mb-6 flex items-center gap-2"><BookOpen className="text-indigo-400"/> Arsip 32 Kasus</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {casesData.map((c) => (
              <div 
                key={c.id} 
                onClick={() => startCase(c)}
                className="bg-neutral-900 border border-neutral-800 p-4 rounded-xl hover:border-indigo-500 cursor-pointer transition-all group"
              >
                <div className="text-neutral-500 text-xs font-mono mb-2">ID: #{c.id.toString().padStart(2,'0')}</div>
                <h3 className="font-bold text-neutral-200 group-hover:text-indigo-300 mb-2 line-clamp-1">{c.title}</h3>
                <p className="text-neutral-400 text-xs line-clamp-2">{c.problem}</p>
                <div className="mt-4 flex justify-between items-center">
                  <span className="text-[10px] bg-neutral-800 px-2 py-0.5 rounded text-neutral-400">{c.client}</span>
                  <ArrowRight size={14} className="text-indigo-500 transform group-hover:translate-x-1 transition-transform" />
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* INVESTIGATE */}
      {gameState === 'investigate' && (
        <div className="max-w-2xl mx-auto bg-neutral-900 border border-neutral-800 p-6 md:p-10 rounded-3xl shadow-2xl animate-in zoom-in-95 duration-300">
          <div className="mb-8">
            <span className="text-indigo-500 text-xs font-bold uppercase tracking-widest">Klien: {activeCase.client}</span>
            <h2 className="text-3xl font-bold mt-2">{activeCase.title}</h2>
            <p className="text-neutral-400 mt-4 leading-relaxed italic border-l-2 border-indigo-500 pl-4">"{activeCase.problem}"</p>
          </div>

          <div className="grid grid-cols-2 gap-4 mb-8">
            {[1, 2, 3, 4].map((i) => (
              <button 
                key={i} 
                disabled={collectedCount >= i}
                onClick={() => setCollectedCount(i)}
                className={`p-6 rounded-2xl border-2 transition-all flex flex-col items-center gap-2 ${collectedCount >= i ? 'bg-neutral-800 border-indigo-500 text-indigo-400' : 'bg-neutral-950 border-neutral-800 hover:border-neutral-700'}`}
              >
                {collectedCount >= i ? <CheckCircle /> : getIconForCase(i + activeCase.id)}
                <span className="text-xs font-bold">Bukti {i}</span>
              </button>
            ))}
          </div>

          <button 
            disabled={collectedCount < 4}
            onClick={finishInvestigate}
            className={`w-full py-4 rounded-xl font-bold transition-all ${collectedCount >= 4 ? 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-xl shadow-indigo-600/20' : 'bg-neutral-800 text-neutral-600 cursor-not-allowed'}`}
          >
            {collectedCount < 4 ? `Cari ${4 - collectedCount} Bukti Lagi...` : 'MASUK KE MODE ANALISIS'}
          </button>
        </div>
      )}

      {/* DEDUCTION */}
      {gameState === 'deduction' && (
        <div className="max-w-2xl mx-auto animate-in slide-in-from-right-8 duration-500">
          <div className="text-center mb-8">
            <Brain size={48} className="text-indigo-500 mx-auto mb-4" />
            <h2 className="text-2xl font-bold">Apa kebutuhan batin yang hilang?</h2>
          </div>
          
          <div className="space-y-4">
            <button 
              onClick={() => handleDeduction(true)}
              className="w-full p-6 bg-neutral-900 border border-neutral-800 rounded-2xl text-left hover:border-indigo-500 transition-all flex justify-between items-center group"
            >
              <span className="font-medium text-neutral-300">{activeCase.deduction}</span>
              <CheckCircle className="text-neutral-700 group-hover:text-indigo-500 transition-colors" />
            </button>
            <button 
              onClick={() => handleDeduction(false)}
              className="w-full p-6 bg-neutral-900 border border-neutral-800 rounded-2xl text-left hover:border-red-500 transition-all flex justify-between items-center group opacity-60"
            >
              <span className="font-medium text-neutral-400">Berikan apa saja keinginan mereka tanpa mawas diri.</span>
              <XCircle className="text-neutral-700 group-hover:text-red-500 transition-colors" />
            </button>
          </div>

          {showFeedback && (
            <div className={`mt-8 p-6 rounded-2xl border ${isCorrect ? 'bg-emerald-900/20 border-emerald-500 text-emerald-400' : 'bg-red-900/20 border-red-500 text-red-400'} animate-in fade-in zoom-in-95`}>
              <div className="flex items-center gap-3">
                {isCorrect ? <Smile size={24} /> : <Frown size={24} />}
                <p className="font-bold">{isCorrect ? 'Analisis Tepat! Klien mulai menyadari kesalahannya.' : 'Analisis meleset. Mereka makin tenggelam dalam keinginan semu.'}</p>
              </div>
              {!isCorrect && <button onClick={() => setShowFeedback(false)} className="mt-4 text-xs underline">Coba Lagi</button>}
            </div>
          )}
        </div>
      )}

      {/* RESOLUTION */}
      {gameState === 'resolution' && (
        <div className="max-w-xl mx-auto text-center py-20 animate-in fade-in duration-1000">
          <div className="inline-block p-4 bg-emerald-500/20 rounded-full mb-6">
            <Heart size={64} className="text-emerald-500" />
          </div>
          <h2 className="text-4xl font-black mb-6">KASUS TERSELESAIKAN</h2>
          <div className="bg-neutral-900 p-8 rounded-3xl border border-neutral-800 shadow-2xl mb-10">
            <p className="text-xl text-neutral-300 italic leading-relaxed">"{activeCase.resolution}"</p>
          </div>
          <button 
            onClick={() => setGameState('caselist')}
            className="bg-neutral-100 text-neutral-900 px-10 py-4 rounded-full font-bold hover:bg-white transition-all"
          >
            LIHAT KASUS LAINNYA
          </button>
        </div>
      )}

      {/* FOOTER */}
      <footer className="mt-20 text-center text-neutral-600 text-xs">
        <p>© 2024 Detektif Batin - Gunakan Mawas Diri Untuk Hidup Lebih Baik</p>
      </footer>
    </div>
  );
}